
<template>
  <div class="nav db-drop">
    <div class="nav-select">
      <a href="javascript:;" @click="Show" data-id="select"
        >分类
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 11 6"
          width="9"
          height="4"
          class="icon-arrow-up"
        >
          <path
            fill="#389eac"
            d="M0 4.9L.92 6 5.5 1.9 10.08 6 11 4.9 5.52 0 0 4.9z"
          ></path>
        </svg>
      </a>
      <a href="javascript:;"
        >筛选
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 11 6"
          width="9"
          height="4"
          class="icon-arrow-up"
        >
          <path
            fill="#389eac"
            d="M0 4.9L.92 6 5.5 1.9 10.08 6 11 4.9 5.52 0 0 4.9z"
          ></path>
        </svg>
      </a>
    </div>
    <div class="nav-sort">
      <a href="#">热度</a>
      <a href="#">更新时间</a>
      <a href="#">价格从低到高</a>
      <a href="#">价格从高到低</a>
      <a href="#" @click="to">评分从高到低</a>
    </div>
    <div class="db-drop-down" id="select" v-show="isShow">
      <ul class="db-drop-menu" v-show="up">
        <li
          @click="chose($event)"
          class="notActive"
          :class="{ active: 1 == selected }"
          id="1"
        >
          全部
        </li>

        <li
          v-for="(value, i) in items"
          :key="i"
          :id="value.id"
          @click="chose($event)"
          :class="{ active: value.id == selected }"
          class="notActive"
        >
          {{ value.name }}
        </li>
      </ul>
      <ul class="db-drop-menu" v-show="cItem">
        <li>全部</li>
        <li
          v-for="(value, i) in cItems"
          :key="i"
          :id="value.id"
          @click="choseC($event)"
          class="notActive"
          :class="{ active: value.id == selectedC }"
        >
          {{ value.name }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      isShow: false,
      cItem: true,
      up: true,
      down: true,
      //主分类
      items: {},
      isActive: "",
      Allcheck: false,
      selected: 0,
      //子分类
      cItems: {},
      selectedC: 0,
      book: [],
    };
  },
  methods: {
    to() {
      this.$router.push("/zhd");
    },

    Show() {
      this.isShow = !this.isShow;
    },
    chose(e) {
      //获取样式
      this.Allcheck = false;
      console.log(e.target.id);
      this.selected = e.target.id;
      //获取子分类
      if (this.selected == 1) {
        this.isShow = !this.isShow;
      } else {
        this.axios.get(`/item/publishF?mId=${this.selected}`).then((result) => {
          this.cItems = result.data.data;
          this.getBookbyid(this.selected);
        });
      }
    },
    choseC(e) {
      //控制子菜单样式
      this.selectedC = e.target.id;
      //axios请求
      if (this.selected == 1) {
        this.isShow = !this.isShow;
      } else {
        this.axios.get(`/item/publishF?mId=${this.selected}`).then((result) => {
          this.cItems = result.data.data;
          this.getBookbyItemid(this.selectedC);
        });
      }
    },
    getBookbyItemid(id){
        this.axios.get(`/book/publishDetail?itemId=${id}`).then((result) => {
        //获取书本数据
        //数组直接复制无法触发响应，使用push方法触发响应
        //判断是否存在之前的旧数据，如果有，就清除
        // if (this.Bookes.length > 0) {
          this.Bookes.splice(0, this.Bookes.length);
          this.Bookes.push(...result.data.data);
        // } else {
        //   this.Bookes.push(...result.data.data);
        // }
      });
    },
    getBookbyid(id) {
      this.axios.get(`/book/publish?bookId=${id}`).then((result) => {
        //获取书本数据
        //数组直接复制无法触发响应，使用push方法触发响应
        //判断是否存在之前的旧数据，如果有，就清除
        // if (this.Bookes.length > 0) {
          this.Bookes.splice(0, this.Bookes.length);
          this.Bookes.push(...result.data.data);
        // } else {
        //   this.Bookes.push(...result.data.data);
        // }
      });
    },
  },
  props: ["Bookes"],
  computed: {

  },
  mounted() {
    this.axios.get("/item/publishM").then((result) => {
      this.items = result.data.data;
    });
  },
};
</script>
<style lang="scss">
.active {
  background-color: #389eac;
  color: #fff !important;
}
.notActive {
  color: #000;
}
.nav{
  box-sizing: border-box;
}
</style>